<template>
  <view class="cart-page">
    <view class="page-header">
      <text class="title">我的购物车</text>
    </view>

    <!-- 购物车为空时显示 -->
    <view class="empty-cart" v-if="cartItems.length === 0">
      <image src="/static/icons/empty-cart.png" class="empty-icon"></image>
      <text class="empty-text">购物车还是空的</text>
      <button class="goto-shopping" type="primary" @click="gotoHome">去逛逛</button>
    </view>

    <!-- 购物车列表 -->
    <view class="cart-list" v-else>
      <view class="cart-item" v-for="(item, index) in cartItems" :key="index">
        <view class="item-checkbox">
          <view class="checkbox-placeholder"></view>
        </view>
        <image :src="item.image" class="item-image"></image>
        <view class="item-info">
          <text class="item-title">{{ item.title }}</text>
          <text class="item-spec">{{ item.spec }}</text>
          <view class="item-price">¥{{ item.price.toFixed(2) }}</view>
        </view>
        <view class="item-quantity">
          <button class="quantity-btn" size="mini" @click="decreaseQuantity(index)">-</button>
          <text class="quantity">{{ item.quantity }}</text>
          <button class="quantity-btn" size="mini" @click="increaseQuantity(index)">+</button>
        </view>
        <view class="item-total">¥{{ (item.price * item.quantity).toFixed(2) }}</view>
        <view class="item-delete" @click="deleteItem(index)">
          <uni-icons type="trash" size="28" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 底部结算栏 -->
    <view class="cart-footer" v-else>
      <view class="select-all">
        <view class="checkbox-placeholder"></view>
        <text>全选</text>
      </view>
      <view class="total-info">
        <text class="total-text">合计: </text>
        <text class="total-price">¥{{ totalPrice.toFixed(2) }}</text>
      </view>
      <button class="settlement-btn" type="primary" @click="gotoCheckout">结算 ({{ selectedCount }})</button>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { computed } from '@vue/composition-api';
import { onShow } from '@dcloudio/uni-app';

interface CartItem {
  id: number;
  title: string;
  price: number;
  image: string;
  spec: string;
  quantity: number;
  checked: boolean;
}

export default defineComponent({
  
  setup() {
    const cartItems = ref<CartItem[]>([]);
    const selectAll = ref(false);

    // 页面显示时加载购物车数据
    onShow(() => {
      loadCartData();
    });

    // 从本地存储加载购物车数据
    const loadCartData = () => {
      const cartData = uni.getStorageSync('cart');
      if (cartData) {
        cartItems.value = JSON.parse(cartData).map((item: any) => ({
          ...item,
          checked: true // 默认选中
        }));
        // 更新全选状态
        updateSelectAllStatus();
      } else {
        cartItems.value = [];
      }
    };

    // 更新全选状态
    const updateSelectAllStatus = () => {
      if (cartItems.value.length === 0) {
        selectAll.value = false;
        return;
      }
      selectAll.value = cartItems.value.every(item => item.checked);
    };

    // 选择/取消选择单个商品
    const checkItem = (index: number, checked: boolean) => {
      cartItems.value[index].checked = checked;
      updateSelectAllStatus();
      saveCartData();
    };

    // 全选/取消全选
    const checkAll = (e: any) => {
      const checked = e.detail.value;
      selectAll.value = checked;
      cartItems.value.forEach(item => {
        item.checked = checked;
      });
      saveCartData();
    };

    // 减少商品数量
    const decreaseQuantity = (index: number) => {
      if (cartItems.value[index].quantity > 1) {
        cartItems.value[index].quantity--;
        saveCartData();
      }
    };

    // 增加商品数量
    const increaseQuantity = (index: number) => {
      cartItems.value[index].quantity++;
      saveCartData();
    };

    // 删除商品
    const deleteItem = (index: number) => {
      cartItems.value.splice(index, 1);
      updateSelectAllStatus();
      saveCartData();
      uni.showToast({ title: '已删除', icon: 'success' });
    };

    // 保存购物车数据到本地存储
    const saveCartData = () => {
      uni.setStorageSync('cart', JSON.stringify(cartItems.value));
    };

    // 计算选中商品总价
    const totalPrice = computed(() => {
      return cartItems.value.reduce((total, item) => {
        return item.checked ? total + (item.price * item.quantity) : total;
      }, 0);
    });

    // 计算选中商品数量
    const selectedCount = computed(() => {
      return cartItems.value.reduce((count, item) => {
        return item.checked ? count + item.quantity : count;
      }, 0);
    });

    // 前往首页
    const gotoHome = () => {
      uni.switchTab({ url: '/pages/index/index' });
    };

    // 前往结算
    const gotoCheckout = () => {
      if (selectedCount.value === 0) {
        uni.showToast({ title: '请选择商品', icon: 'none' });
        return;
      }

      // 获取选中的商品
      const selectedItems = cartItems.value.filter(item => item.checked);
      // 跳转到订单确认页
      uni.navigateTo({
        url: '/pages/order-confirm/index'
      });
    };

    return {
      cartItems,
      selectAll,
      checkItem,
      checkAll,
      decreaseQuantity,
      increaseQuantity,
      deleteItem,
      totalPrice,
      selectedCount,
      gotoHome,
      gotoCheckout
    };
  }
});
</script>

<style scoped>
/* 页面头部 */
.page-header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 99;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: block;
}

/* 空购物车 */
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.goto-shopping {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
}

/* 购物车列表 */
.cart-list {
  padding-bottom: 120rpx;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.item-checkbox {
  margin-right: 20rpx;
}

.item-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  margin-right: 20rpx;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 40rpx;
}

.item-spec {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
}

.item-price {
  font-size: 28rpx;
  color: #ff4400;
  margin-top: 10rpx;
  font-weight: bold;
}

.item-quantity {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.quantity-btn {
  width: 50rpx;
  height: 50rpx;
  padding: 0;
  line-height: 50rpx;
}

.quantity {
  width: 60rpx;
  text-align: center;
  font-size: 28rpx;
}

.item-total {
  font-size: 28rpx;
  color: #ff4400;
  font-weight: bold;
  margin-right: 20rpx;
}

.item-delete {
  color: #999;
}

/* 底部结算栏 */
.cart-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-top: 1rpx solid #eee;
}

.select-all {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.select-all text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.total-info {
  flex: 1;
}

.total-text {
  font-size: 28rpx;
  color: #333;
}

.total-price {
  font-size: 32rpx;
  color: #ff4400;
  font-weight: bold;
}

.settlement-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
}

</style>
- import { computed } from '@vue/composition-api';
+ import { computed } from '@vue/composition-api';
import { onShow } from '@dcloudio/uni-app';

interface CartItem {
  id: number;
  title: string;
  price: number;
  image: string;
  spec: string;
  quantity: number;
  checked: boolean;
}

export default defineComponent({
  setup() {
    const cartItems = ref<CartItem[]>([]);
    const selectAll = ref(false);

    // 页面显示时加载购物车数据
    onShow(() => {
      loadCartData();
    });

    // 从本地存储加载购物车数据
    const loadCartData = () => {
      const cartData = uni.getStorageSync('cart');
      if (cartData) {
        cartItems.value = JSON.parse(cartData).map((item: any) => ({
          ...item,
          checked: true // 默认选中
        }));
        // 更新全选状态
        updateSelectAllStatus();
      } else {
        cartItems.value = [];
      }
    };

    // 更新全选状态
    const updateSelectAllStatus = () => {
      if (cartItems.value.length === 0) {
        selectAll.value = false;
        return;
      }
      selectAll.value = cartItems.value.every(item => item.checked);
    };

    // 选择/取消选择单个商品
    const checkItem = (index: number, checked: boolean) => {
      cartItems.value[index].checked = checked;
      updateSelectAllStatus();
      saveCartData();
    };

    // 全选/取消全选
    const checkAll = (e: any) => {
      const checked = e.detail.value;
      selectAll.value = checked;
      cartItems.value.forEach(item => {
        item.checked = checked;
      });
      saveCartData();
    };

    // 减少商品数量
    const decreaseQuantity = (index: number) => {
      if (cartItems.value[index].quantity > 1) {
        cartItems.value[index].quantity--;
        saveCartData();
      }
    };

    // 增加商品数量
    const increaseQuantity = (index: number) => {
      cartItems.value[index].quantity++;
      saveCartData();
    };

    // 删除商品
    const deleteItem = (index: number) => {
      cartItems.value.splice(index, 1);
      updateSelectAllStatus();
      saveCartData();
      uni.showToast({ title: '已删除', icon: 'success' });
    };

    // 保存购物车数据到本地存储
    const saveCartData = () => {
      uni.setStorageSync('cart', JSON.stringify(cartItems.value));
    };

    // 计算选中商品总价
    const totalPrice = computed(() => {
      return cartItems.value.reduce((total, item) => {
        return item.checked ? total + (item.price * item.quantity) : total;
      }, 0);
    });

    // 计算选中商品数量
    const selectedCount = computed(() => {
      return cartItems.value.reduce((count, item) => {
        return item.checked ? count + item.quantity : count;
      }, 0);
    });

    // 前往首页
    const gotoHome = () => {
      uni.switchTab({ url: '/pages/index/index' });
    };

    // 前往结算
    const gotoCheckout = () => {
      if (selectedCount.value === 0) {
        uni.showToast({ title: '请选择商品', icon: 'none' });
        return;
      }

      // 获取选中的商品
      const selectedItems = cartItems.value.filter(item => item.checked);
      // 跳转到订单确认页
      uni.navigateTo({
        url: '/pages/order-confirm/index'
      });
    };

    return {
      cartItems,
      selectAll,
      checkItem,
      checkAll,
      decreaseQuantity,
      increaseQuantity,
      deleteItem,
      totalPrice,
      selectedCount,
      gotoHome,
      gotoCheckout
    };
  }
});
</script>

<style scoped>
/* 页面头部 */
.page-header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 99;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: block;
}

/* 空购物车 */
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.goto-shopping {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
}

/* 购物车列表 */
.cart-list {
  padding-bottom: 120rpx;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.item-checkbox {
  margin-right: 20rpx;
}

.item-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  margin-right: 20rpx;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 40rpx;
}

.item-spec {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
}

.item-price {
  font-size: 28rpx;
  color: #ff4400;
  margin-top: 10rpx;
  font-weight: bold;
}

.item-quantity {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.quantity-btn {
  width: 50rpx;
  height: 50rpx;
  padding: 0;
  line-height: 50rpx;
}

.quantity {
  width: 60rpx;
  text-align: center;
  font-size: 28rpx;
}

.item-total {
  font-size: 28rpx;
  color: #ff4400;
  font-weight: bold;
  margin-right: 20rpx;
}

.item-delete {
  color: #999;
}

/* 底部结算栏 */
.cart-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-top: 1rpx solid #eee;
}

.select-all {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.select-all text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.total-info {
  flex: 1;
}

.total-text {
  font-size: 28rpx;
  color: #333;
}

.total-price {
  font-size: 32rpx;
  color: #ff4400;
  font-weight: bold;
}

.settlement-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
}
</style>
import { computed } from '@vue/composition-api';
import { onShow } from '@dcloudio/uni-app';

interface CartItem {
  id: number;
  title: string;
  price: number;
  image: string;
  spec: string;
  quantity: number;
  checked: boolean;
}

export default defineComponent({
  setup() {
    const cartItems = ref<CartItem[]>([]);
    const selectAll = ref(false);

    // 页面显示时加载购物车数据
    onShow(() => {
      loadCartData();
    });

    // 从本地存储加载购物车数据
    const loadCartData = () => {
      const cartData = uni.getStorageSync('cart');
      if (cartData) {
        cartItems.value = JSON.parse(cartData).map((item: any) => ({
          ...item,
          checked: true // 默认选中
        }));
        // 更新全选状态
        updateSelectAllStatus();
      } else {
        cartItems.value = [];
      }
    };

    // 更新全选状态
    const updateSelectAllStatus = () => {
      if (cartItems.value.length === 0) {
        selectAll.value = false;
        return;
      }
      selectAll.value = cartItems.value.every(item => item.checked);
    };

    // 选择/取消选择单个商品
    const checkItem = (index: number, checked: boolean) => {
      cartItems.value[index].checked = checked;
      updateSelectAllStatus();
      saveCartData();
    };

    // 全选/取消全选
    const checkAll = (e: any) => {
      const checked = e.detail.value;
      selectAll.value = checked;
      cartItems.value.forEach(item => {
        item.checked = checked;
      });
      saveCartData();
    };

    // 减少商品数量
    const decreaseQuantity = (index: number) => {
      if (cartItems.value[index].quantity > 1) {
        cartItems.value[index].quantity--;
        saveCartData();
      }
    };

    // 增加商品数量
    const increaseQuantity = (index: number) => {
      cartItems.value[index].quantity++;
      saveCartData();
    };

    // 删除商品
    const deleteItem = (index: number) => {
      cartItems.value.splice(index, 1);
      updateSelectAllStatus();
      saveCartData();
      uni.showToast({ title: '已删除', icon: 'success' });
    };

    // 保存购物车数据到本地存储
    const saveCartData = () => {
      uni.setStorageSync('cart', JSON.stringify(cartItems.value));
    };

    // 计算选中商品总价
    const totalPrice = computed(() => {
      return cartItems.value.reduce((total, item) => {
        return item.checked ? total + (item.price * item.quantity) : total;
      }, 0);
    });

    // 计算选中商品数量
    const selectedCount = computed(() => {
      return cartItems.value.reduce((count, item) => {
        return item.checked ? count + item.quantity : count;
      }, 0);
    });

    // 前往首页
    const gotoHome = () => {
      uni.switchTab({ url: '/pages/index/index' });
    };

    // 前往结算
    const gotoCheckout = () => {
      if (selectedCount.value === 0) {
        uni.showToast({ title: '请选择商品', icon: 'none' });
        return;
      }

      // 获取选中的商品
      const selectedItems = cartItems.value.filter(item => item.checked);
      // 跳转到订单确认页
      uni.navigateTo({
        url: '/pages/order-confirm/index'
      });
    };

    return {
      cartItems,
      selectAll,
      checkItem,
      checkAll,
      decreaseQuantity,
      increaseQuantity,
      deleteItem,
      totalPrice,
      selectedCount,
      gotoHome,
      gotoCheckout
    };
  }
});
</script>

<style scoped>
/* 页面头部 */
.page-header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 99;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: block;
}

/* 空购物车 */
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.goto-shopping {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
}

/* 购物车列表 */
.cart-list {
  padding-bottom: 120rpx;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.item-checkbox {
  margin-right: 20rpx;
}

.item-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  margin-right: 20rpx;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 40rpx;
}

.item-spec {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
}

.item-price {
  font-size: 28rpx;
  color: #ff4400;
  margin-top: 10rpx;
  font-weight: bold;
}

.item-quantity {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.quantity-btn {
  width: 50rpx;
  height: 50rpx;
  padding: 0;
  line-height: 50rpx;
}

.quantity {
  width: 60rpx;
  text-align: center;
  font-size: 28rpx;
}

.item-total {
  font-size: 28rpx;
  color: #ff4400;
  font-weight: bold;
  margin-right: 20rpx;
}

.item-delete {
  color: #999;
}

/* 底部结算栏 */
.cart-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-top: 1rpx solid #eee;
}

.select-all {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.select-all text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.total-info {
  flex: 1;
}

.total-text {
  font-size: 28rpx;
  color: #333;
}

.total-price {
  font-size: 32rpx;
  color: #ff4400;
  font-weight: bold;
}

.settlement-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
}
</style>
import { computed } from '@vue/composition-api';
import { onShow } from '@dcloudio/uni-app';

interface CartItem {
  id: number;
  title: string;
  price: number;
  image: string;
  spec: string;
  quantity: number;
  checked: boolean;
}

export default defineComponent({
  setup() {
    const cartItems = ref<CartItem[]>([]);
    const selectAll = ref(false);

    // 页面显示时加载购物车数据
    onShow(() => {
      loadCartData();
    });

    // 从本地存储加载购物车数据
    const loadCartData = () => {
      const cartData = uni.getStorageSync('cart');
      if (cartData) {
        cartItems.value = JSON.parse(cartData).map((item: any) => ({
          ...item,
          checked: true // 默认选中
        }));
        // 更新全选状态
        updateSelectAllStatus();
      } else {
        cartItems.value = [];
      }
    };

    // 更新全选状态
    const updateSelectAllStatus = () => {
      if (cartItems.value.length === 0) {
        selectAll.value = false;
        return;
      }
      selectAll.value = cartItems.value.every(item => item.checked);
    };

    // 选择/取消选择单个商品
    const checkItem = (index: number, checked: boolean) => {
      cartItems.value[index].checked = checked;
      updateSelectAllStatus();
      saveCartData();
    };

    // 全选/取消全选
    const checkAll = (e: any) => {
      const checked = e.detail.value;
      selectAll.value = checked;
      cartItems.value.forEach(item => {
        item.checked = checked;
      });
      saveCartData();
    };

    // 减少商品数量
    const decreaseQuantity = (index: number) => {
      if (cartItems.value[index].quantity > 1) {
        cartItems.value[index].quantity--;
        saveCartData();
      }
    };

    // 增加商品数量
    const increaseQuantity = (index: number) => {
      cartItems.value[index].quantity++;
      saveCartData();
    };

    // 删除商品
    const deleteItem = (index: number) => {
      cartItems.value.splice(index, 1);
      updateSelectAllStatus();
      saveCartData();
      uni.showToast({ title: '已删除', icon: 'success' });
    };

    // 保存购物车数据到本地存储
    const saveCartData = () => {
      uni.setStorageSync('cart', JSON.stringify(cartItems.value));
    };

    // 计算选中商品总价
    const totalPrice = computed(() => {
      return cartItems.value.reduce((total, item) => {
        return item.checked ? total + (item.price * item.quantity) : total;
      }, 0);
    });

    // 计算选中商品数量
    const selectedCount = computed(() => {
      return cartItems.value.reduce((count, item) => {
        return item.checked ? count + item.quantity : count;
      }, 0);
    });

    // 前往首页
    const gotoHome = () => {
      uni.switchTab({ url: '/pages/index/index' });
    };

    // 前往结算
    const gotoCheckout = () => {
      if (selectedCount.value === 0) {
        uni.showToast({ title: '请选择商品', icon: 'none' });
        return;
      }

      // 获取选中的商品
      const selectedItems = cartItems.value.filter(item => item.checked);
      // 跳转到订单确认页
      uni.navigateTo({
        url: '/pages/order-confirm/index'
      });
    };

    return {
      cartItems,
      selectAll,
      checkItem,
      checkAll,
      decreaseQuantity,
      increaseQuantity,
      deleteItem,
      totalPrice,
      selectedCount,
      gotoHome,
      gotoCheckout
    };
  }
});
</script>

<style scoped>
/* 页面头部 */
.page-header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 99;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: block;
}

/* 空购物车 */
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.goto-shopping {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
}

/* 购物车列表 */
.cart-list {
  padding-bottom: 120rpx;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.item-checkbox {
  margin-right: 20rpx;
}

.item-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  margin-right: 20rpx;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 40rpx;
}

.item-spec {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
}

.item-price {
  font-size: 28rpx;
  color: #ff4400;
  margin-top: 10rpx;
  font-weight: bold;
}

.item-quantity {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.quantity-btn {
  width: 50rpx;
  height: 50rpx;
  padding: 0;
  line-height: 50rpx;
}

.quantity {
  width: 60rpx;
  text-align: center;
  font-size: 28rpx;
}

.item-total {
  font-size: 28rpx;
  color: #ff4400;
  font-weight: bold;
  margin-right: 20rpx;
}

.item-delete {
  color: #999;
}

/* 底部结算栏 */
.cart-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-top: 1rpx solid #eee;
}

.select-all {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.select-all text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.total-info {
  flex: 1;
}

.total-text {
  font-size: 28rpx;
  color: #333;
}

.total-price {
  font-size: 32rpx;
  color: #ff4400;
  font-weight: bold;
}

.settlement-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
}
</style>
import { computed } from '@vue/composition-api';
import { onShow } from '@dcloudio/uni-app';

interface CartItem {
  id: number;
  title: string;
  price: number;
  image: string;
  spec: string;
  quantity: number;
  checked: boolean;
}

export default defineComponent({
  setup() {
    const cartItems = ref<CartItem[]>([]);
    const selectAll = ref(false);

    // 页面显示时加载购物车数据
    onShow(() => {
      loadCartData();
    });

    // 从本地存储加载购物车数据
    const loadCartData = () => {
      const cartData = uni.getStorageSync('cart');
      if (cartData) {
        cartItems.value = JSON.parse(cartData).map((item: any) => ({
          ...item,
          checked: true // 默认选中
        }));
        // 更新全选状态
        updateSelectAllStatus();
      } else {
        cartItems.value = [];
      }
    };

    // 更新全选状态
    const updateSelectAllStatus = () => {
      if (cartItems.value.length === 0) {
        selectAll.value = false;
        return;
      }
      selectAll.value = cartItems.value.every(item => item.checked);
    };

    // 选择/取消选择单个商品
    const checkItem = (index: number, checked: boolean) => {
      cartItems.value[index].checked = checked;
      updateSelectAllStatus();
      saveCartData();
    };

    // 全选/取消全选
    const checkAll = (e: any) => {
      const checked = e.detail.value;
      selectAll.value = checked;
      cartItems.value.forEach(item => {
        item.checked = checked;
      });
      saveCartData();
    };

    // 减少商品数量
    const decreaseQuantity = (index: number) => {
      if (cartItems.value[index].quantity > 1) {
        cartItems.value[index].quantity--;
        saveCartData();
      }
    };

    // 增加商品数量
    const increaseQuantity = (index: number) => {
      cartItems.value[index].quantity++;
      saveCartData();
    };

    // 删除商品
    const deleteItem = (index: number) => {
      cartItems.value.splice(index, 1);
      updateSelectAllStatus();
      saveCartData();
      uni.showToast({ title: '已删除', icon: 'success' });
    };

    // 保存购物车数据到本地存储
    const saveCartData = () => {
      uni.setStorageSync('cart', JSON.stringify(cartItems.value));
    };

    // 计算选中商品总价
    const totalPrice = computed(() => {
      return cartItems.value.reduce((total, item) => {
        return item.checked ? total + (item.price * item.quantity) : total;
      }, 0);
    });

    // 计算选中商品数量
    const selectedCount = computed(() => {
      return cartItems.value.reduce((count, item) => {
        return item.checked ? count + item.quantity : count;
      }, 0);
    });

    // 前往首页
    const gotoHome = () => {
      uni.switchTab({ url: '/pages/index/index' });
    };

    // 前往结算
    const gotoCheckout = () => {
      if (selectedCount.value === 0) {
        uni.showToast({ title: '请选择商品', icon: 'none' });
        return;
      }

      // 获取选中的商品
      const selectedItems = cartItems.value.filter(item => item.checked);
      // 跳转到订单确认页
      uni.navigateTo({
        url: '/pages/order-confirm/index'
      });
    };

    return {
      cartItems,
      selectAll,
      checkItem,
      checkAll,
      decreaseQuantity,
      increaseQuantity,
      deleteItem,
      totalPrice,
      selectedCount,
      gotoHome,
      gotoCheckout
    };
  }
});
</script>

<style scoped>
/* 页面头部 */
.page-header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 99;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: block;
}

/* 空购物车 */
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.goto-shopping {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
}

/* 购物车列表 */
.cart-list {
  padding-bottom: 120rpx;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.item-checkbox {
  margin-right: 20rpx;
}

.item-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  margin-right: 20rpx;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 40rpx;
}

.item-spec {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
}

.item-price {
  font-size: 28rpx;
  color: #ff4400;
  margin-top: 10rpx;
  font-weight: bold;
}

.item-quantity {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.quantity-btn {
  width: 50rpx;
  height: 50rpx;
  padding: 0;
  line-height: 50rpx;
}

.quantity {
  width: 60rpx;
  text-align: center;
  font-size: 28rpx;
}

.item-total {
  font-size: 28rpx;
  color: #ff4400;
  font-weight: bold;
  margin-right: 20rpx;
}

.item-delete {
  color: #999;
}

/* 底部结算栏 */
.cart-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-top: 1rpx solid #eee;
}

.select-all {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.select-all text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.total-info {
  flex: 1;
}

.total-text {
  font-size: 28rpx;
  color: #333;
}

.total-price {
  font-size: 32rpx;
  color: #ff4400;
  font-weight: bold;
}

.settlement-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
}
</style>
import { computed } from '@vue/composition-api';
import { onShow } from '@dcloudio/uni-app';

interface CartItem {
  id: number;
  title: string;
  price: number;
  image: string;
  spec: string;
  quantity: number;
  checked: boolean;
}

export default defineComponent({
  setup() {
    const cartItems = ref<CartItem[]>([]);
    const selectAll = ref(false);

    // 页面显示时加载购物车数据
    onShow(() => {
      loadCartData();
    });

    // 从本地存储加载购物车数据
    const loadCartData = () => {
      const cartData = uni.getStorageSync('cart');
      if (cartData) {
        cartItems.value = JSON.parse(cartData).map((item: any) => ({
          ...item,
          checked: true // 默认选中
        }));
        // 更新全选状态
        updateSelectAllStatus();
      } else {
        cartItems.value = [];
      }
    };

    // 更新全选状态
    const updateSelectAllStatus = () => {
      if (cartItems.value.length === 0) {
        selectAll.value = false;
        return;
      }
      selectAll.value = cartItems.value.every(item => item.checked);
    };

    // 选择/取消选择单个商品
    const checkItem = (index: number, checked: boolean) => {
      cartItems.value[index].checked = checked;
      updateSelectAllStatus();
      saveCartData();
    };

    // 全选/取消全选
    const checkAll = (e: any) => {
      const checked = e.detail.value;
      selectAll.value = checked;
      cartItems.value.forEach(item => {
        item.checked = checked;
      });
      saveCartData();
    };

    // 减少商品数量
    const decreaseQuantity = (index: number) => {
      if (cartItems.value[index].quantity > 1) {
        cartItems.value[index].quantity--;
        saveCartData();
      }
    };

    // 增加商品数量
    const increaseQuantity = (index: number) => {
      cartItems.value[index].quantity++;
      saveCartData();
    };

    // 删除商品
    const deleteItem = (index: number) => {
      cartItems.value.splice(index, 1);
      updateSelectAllStatus();
      saveCartData();
      uni.showToast({ title: '已删除', icon: 'success' });
    };

    // 保存购物车数据到本地存储
    const saveCartData = () => {
      uni.setStorageSync('cart', JSON.stringify(cartItems.value));
    };

    // 计算选中商品总价
    const totalPrice = computed(() => {
      return cartItems.value.reduce((total, item) => {
        return item.checked ? total + (item.price * item.quantity) : total;
      }, 0);
    });

    // 计算选中商品数量
    const selectedCount = computed(() => {
      return cartItems.value.reduce((count, item) => {
        return item.checked ? count + item.quantity : count;
      }, 0);
    });

    // 前往首页
    const gotoHome = () => {
      uni.switchTab({ url: '/pages/index/index' });
    };

    // 前往结算
    const gotoCheckout = () => {
      if (selectedCount.value === 0) {
        uni.showToast({ title: '请选择商品', icon: 'none' });
        return;
      }

      // 获取选中的商品
      const selectedItems = cartItems.value.filter(item => item.checked);
      // 跳转到订单确认页
      uni.navigateTo({
        url: '/pages/order-confirm/index'
      });
    };

    return {
      cartItems,
      selectAll,
      checkItem,
      checkAll,
      decreaseQuantity,
      increaseQuantity,
      deleteItem,
      totalPrice,
      selectedCount,
      gotoHome,
      gotoCheckout
    };
  }
});
</script>

<style scoped>
/* 页面头部 */
.page-header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 99;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: block;
}

/* 空购物车 */
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.goto-shopping {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
}

/* 购物车列表 */
.cart-list {
  padding-bottom: 120rpx;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.item-checkbox {
  margin-right: 20rpx;
}

.item-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  margin-right: 20rpx;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 40rpx;
}

.item-spec {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
}

.item-price {
  font-size: 28rpx;
  color: #ff4400;
  margin-top: 10rpx;
  font-weight: bold;
}

.item-quantity {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.quantity-btn {
  width: 50rpx;
  height: 50rpx;
  padding: 0;
  line-height: 50rpx;
}

.quantity {
  width: 60rpx;
  text-align: center;
  font-size: 28rpx;
}

.item-total {
  font-size: 28rpx;
  color: #ff4400;
  font-weight: bold;
  margin-right: 20rpx;
}

.item-delete {
  color: #999;
}

/* 底部结算栏 */
.cart-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-top: 1rpx solid #eee;
}

.select-all {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.select-all text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.total-info {
  flex: 1;
}

.total-text {
  font-size: 28rpx;
  color: #333;
}

.total-price {
  font-size: 32rpx;
  color: #ff4400;
  font-weight: bold;
}

.settlement-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
}
</style>
import { computed } from '@vue/composition-api';
import { onShow } from '@dcloudio/uni-app';

interface CartItem {
  id: number;
  title: string;
  price: number;
  image: string;
  spec: string;
  quantity: number;
  checked: boolean;
}

export default defineComponent({
  setup() {
    const cartItems = ref<CartItem[]>([]);
    const selectAll = ref(false);

    // 页面显示时加载购物车数据
    onShow(() => {
      loadCartData();
    });

    // 从本地存储加载购物车数据
    const loadCartData = () => {
      const cartData = uni.getStorageSync('cart');
      if (cartData) {
        cartItems.value = JSON.parse(cartData).map((item: any) => ({
          ...item,
          checked: true // 默认选中
        }));
        // 更新全选状态
        updateSelectAllStatus();
      } else {
        cartItems.value = [];
      }
    };

    // 更新全选状态
    const updateSelectAllStatus = () => {
      if (cartItems.value.length === 0) {
        selectAll.value = false;
        return;
      }
      selectAll.value = cartItems.value.every(item => item.checked);
    };

    // 选择/取消选择单个商品
    const checkItem = (index: number, checked: boolean) => {
      cartItems.value[index].checked = checked;
      updateSelectAllStatus();
      saveCartData();
    };

    // 全选/取消全选
    const checkAll = (e: any) => {
      const checked = e.detail.value;
      selectAll.value = checked;
      cartItems.value.forEach(item => {
        item.checked = checked;
      });
      saveCartData();
    };

    // 减少商品数量
    const decreaseQuantity = (index: number) => {
      if (cartItems.value[index].quantity > 1) {
        cartItems.value[index].quantity--;
        saveCartData();
      }
    };

    // 增加商品数量
    const increaseQuantity = (index: number) => {
      cartItems.value[index].quantity++;
      saveCartData();
    };

    // 删除商品
    const deleteItem = (index: number) => {
      cartItems.value.splice(index, 1);
      updateSelectAllStatus();
      saveCartData();
      uni.showToast({ title: '已删除', icon: 'success' });
    };

    // 保存购物车数据到本地存储
    const saveCartData = () => {
      uni.setStorageSync('cart', JSON.stringify(cartItems.value));
    };

    // 计算选中商品总价
    const totalPrice = computed(() => {
      return cartItems.value.reduce((total, item) => {
        return item.checked ? total + (item.price * item.quantity) : total;
      }, 0);
    });

    // 计算选中商品数量
    const selectedCount = computed(() => {
      return cartItems.value.reduce((count, item) => {
        return item.checked ? count + item.quantity : count;
      }, 0);
    });

    // 前往首页
    const gotoHome = () => {
      uni.switchTab({ url: '/pages/index/index' });
    };

    // 前往结算
    const gotoCheckout = () => {
      if (selectedCount.value === 0) {
        uni.showToast({ title: '请选择商品', icon: 'none' });
        return;
      }

      // 获取选中的商品
      const selectedItems = cartItems.value.filter(item => item.checked);
      // 跳转到订单确认页
      uni.navigateTo({
        url: '/pages/order-confirm/index'
      });
    };

    return {
      cartItems,
      selectAll,
      checkItem,
      checkAll,
      decreaseQuantity,
      increaseQuantity,
      deleteItem,
      totalPrice,
      selectedCount,
      gotoHome,
      gotoCheckout
    };
  }
});
</script>

<style scoped>
/* 页面头部 */
.page-header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 99;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: block;
}

/* 空购物车 */
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.goto-shopping {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
}

/* 购物车列表 */
.cart-list {
  padding-bottom: 120rpx;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.item-checkbox {
  margin-right: 20rpx;
}

.item-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  margin-right: 20rpx;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 40rpx;
}

.item-spec {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
}

.item-price {
  font-size: 28rpx;
  color: #ff4400;
  margin-top: 10rpx;
  font-weight: bold;
}

.item-quantity {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.quantity-btn {
  width: 50rpx;
  height: 50rpx;
  padding: 0;
  line-height: 50rpx;
}

.quantity {
  width: 60rpx;
  text-align: center;
  font-size: 28rpx;
}

.item-total {
  font-size: 28rpx;
  color: #ff4400;
  font-weight: bold;
  margin-right: 20rpx;
}

.item-delete {
  color: #999;
}

/* 底部结算栏 */
.cart-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-top: 1rpx solid #eee;
}

.select-all {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.select-all text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.total-info {
  flex: 1;
}

.total-text {
  font-size: 28rpx;
  color: #333;
}

.total-price {
  font-size: 32rpx;
  color: #ff4400;
  font-weight: bold;
}

.settlement-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
}
</style>
import { computed } from '@vue/composition-api';
import { onShow } from '@dcloudio/uni-app';

interface CartItem {
  id: number;
  title: string;
  price: number;
  image: string;
  spec: string;
  quantity: number;
  checked: boolean;
}

export default defineComponent({
  setup() {
    const cartItems = ref<CartItem[]>([]);
    const selectAll = ref(false);

    // 页面显示时加载购物车数据
    onShow(() => {
      loadCartData();
    });

    // 从本地存储加载购物车数据
    const loadCartData = () => {
      const cartData = uni.getStorageSync('cart');
      if (cartData) {
        cartItems.value = JSON.parse(cartData).map((item: any) => ({
          ...item,
          checked: true // 默认选中
        }));
        // 更新全选状态
        updateSelectAllStatus();
      } else {
        cartItems.value = [];
      }
    };

    // 更新全选状态
    const updateSelectAllStatus = () => {
      if (cartItems.value.length === 0) {
        selectAll.value = false;
        return;
      }
      selectAll.value = cartItems.value.every(item => item.checked);
    };

    // 选择/取消选择单个商品
    const checkItem = (index: number, checked: boolean) => {
      cartItems.value[index].checked = checked;
      updateSelectAllStatus();
      saveCartData();
    };

    // 全选/取消全选
    const checkAll = (e: any) => {
      const checked = e.detail.value;
      selectAll.value = checked;
      cartItems.value.forEach(item => {
        item.checked = checked;
      });
      saveCartData();
    };

    // 减少商品数量
    const decreaseQuantity = (index: number) => {
      if (cartItems.value[index].quantity > 1) {
        cartItems.value[index].quantity--;
        saveCartData();
      }
    };

    // 增加商品数量
    const increaseQuantity = (index: number) => {
      cartItems.value[index].quantity++;
      saveCartData();
    };

    // 删除商品
    const deleteItem = (index: number) => {
      cartItems.value.splice(index, 1);
      updateSelectAllStatus();
      saveCartData();
      uni.showToast({ title: '已删除', icon: 'success' });
    };

    // 保存购物车数据到本地存储
    const saveCartData = () => {
      uni.setStorageSync('cart', JSON.stringify(cartItems.value));
    };

    // 计算选中商品总价
    const totalPrice = computed(() => {
      return cartItems.value.reduce((total, item) => {
        return item.checked ? total + (item.price * item.quantity) : total;
      }, 0);
    });

    // 计算选中商品数量
    const selectedCount = computed(() => {
      return cartItems.value.reduce((count, item) => {
        return item.checked ? count + item.quantity : count;
      }, 0);
    });

    // 前往首页
    const gotoHome = () => {
      uni.switchTab({ url: '/pages/index/index' });
    };

    // 前往结算
    const gotoCheckout = () => {
      if (selectedCount.value === 0) {
        uni.showToast({ title: '请选择商品', icon: 'none' });
        return;
      }

      // 获取选中的商品
      const selectedItems = cartItems.value.filter(item => item.checked);
      // 跳转到订单确认页
      uni.navigateTo({
        url: '/pages/order-confirm/index'
      });
    };

    return {
      cartItems,
      selectAll,
      checkItem,
      checkAll,
      decreaseQuantity,
      increaseQuantity,
      deleteItem,
      totalPrice,
      selectedCount,
      gotoHome,
      gotoCheckout
    };
  }
});
</script>

<style scoped>
/* 页面头部 */
.page-header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 99;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: block;
}

/* 空购物车 */
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.goto-shopping {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
}

/* 购物车列表 */
.cart-list {
  padding-bottom: 120rpx;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.item-checkbox {
  margin-right: 20rpx;
}

.item-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  margin-right: 20rpx;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 40rpx;
}

.item-spec {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
}

.item-price {
  font-size: 28rpx;
  color: #ff4400;
  margin-top: 10rpx;
  font-weight: bold;
}

.item-quantity {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.quantity-btn {
  width: 50rpx;
  height: 50rpx;
  padding: 0;
  line-height: 50rpx;
}

.quantity {
  width: 60rpx;
  text-align: center;
  font-size: 28rpx;
}

.item-total {
  font-size: 28rpx;
  color: #ff4400;
  font-weight: bold;
  margin-right: 20rpx;
}

.item-delete {
  color: #999;
}

/* 底部结算栏 */
.cart-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-top: 1rpx solid #eee;
}

.select-all {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.select-all text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.total-info {
  flex: 1;
}

.total-text {
  font-size: 28rpx;
  color: #333;
}

.total-price {
  font-size: 32rpx;
  color: #ff4400;
  font-weight: bold;
}

.settlement-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
}
</style>
import { computed } from '@vue/composition-api';
import { onShow } from '@dcloudio/uni-app';

interface CartItem {
  id: number;
  title: string;
  price: number;
  image: string;
  spec: string;
  quantity: number;
  checked: boolean;
}

export default defineComponent({
  setup() {
    const cartItems = ref<CartItem[]>([]);
    const selectAll = ref(false);

    // 页面显示时加载购物车数据
    onShow(() => {
      loadCartData();
    });

    // 从本地存储加载购物车数据
    const loadCartData = () => {
      const cartData = uni.getStorageSync('cart');
      if (cartData) {
        cartItems.value = JSON.parse(cartData).map((item: any) => ({
          ...item,
          checked: true // 默认选中
        }));
        // 更新全选状态
        updateSelectAllStatus();
      } else {
        cartItems.value = [];
      }
    };

    // 更新全选状态
    const updateSelectAllStatus = () => {
      if (cartItems.value.length === 0) {
        selectAll.value = false;
        return;
      }
      selectAll.value = cartItems.value.every(item => item.checked);
    };

    // 选择/取消选择单个商品
    const checkItem = (index: number, checked: boolean) => {
      cartItems.value[index].checked = checked;
      updateSelectAllStatus();
      saveCartData();
    };

    // 全选/取消全选
    const checkAll = (e: any) => {
      const checked = e.detail.value;
      selectAll.value = checked;
      cartItems.value.forEach(item => {
        item.checked = checked;
      });
      saveCartData();
    };

    // 减少商品数量
    const decreaseQuantity = (index: number) => {
      if (cartItems.value[index].quantity > 1) {
        cartItems.value[index].quantity--;
        saveCartData();
      }
    };

    // 增加商品数量
    const increaseQuantity = (index: number) => {
      cartItems.value[index].quantity++;
      saveCartData();
    };

    // 删除商品
    const deleteItem = (index: number) => {
      cartItems.value.splice(index, 1);
      updateSelectAllStatus();
      saveCartData();
      uni.showToast({ title: '已删除', icon: 'success' });
    };

    // 保存购物车数据到本地存储
    const saveCartData = () => {
      uni.setStorageSync('cart', JSON.stringify(cartItems.value));
    };

    // 计算选中商品总价
    const totalPrice = computed(() => {
      return cartItems.value.reduce((total, item) => {
        return item.checked ? total + (item.price * item.quantity) : total;
      }, 0);
    });

    // 计算选中商品数量
    const selectedCount = computed(() => {
      return cartItems.value.reduce((count, item) => {
        return item.checked ? count + item.quantity : count;
      }, 0);
    });

    // 前往首页
    const gotoHome = () => {
      uni.switchTab({ url: '/pages/index/index' });
    };

    //